<template>
	<view class="page">
		<cu-custom bgColor="bg-theme" :isBack="true"><block slot="content"></block></cu-custom>
		<scroll-view scroll-y="true">
			<view class="bg-img bg-theme flex align-center banner" style="height: 240rpx;border-bottom-left-radius: 70rpx;border-bottom-right-radius: 70rpx;">
				<view class="flex align-center justify-between padding-xl text-white" style="width: 100%;height: 100%;padding-top: 0;">
					<view class="flex align-center justify-center margin-left text-xl text-fw600">
						{{checkOrderType(order)|| ''}}
					</view>
					<view class="margin-right" v-if="order.order_status">
						<image :src="'../../static/images/order_'+order.order_status+'.png'" mode="aspectFit" style="width: 140rpx;height: 140rpx;"></image>
					</view>
				</view>
			</view>
			<view class="bg-white radius20 margin-left-sm margin-right-sm padding" style="position: relative;margin-top: -60rpx;">
				<view class="flex align-center">
					<view class="cu-avatar radius orderIcon" style="background-image:url(../../static/images/icon_order_addr.png);height: 50rpx;"></view>
					<view class="margin-left" style="flex: 1;">
						<view class="">
							<text>{{order.ship_name}}</text>
							<text class="margin-left ">{{order.ship_mobile}}</text>
						</view>
						<view class="text-sm margin-top-sm" style="line-height:30upx;">
							{{order.ship_province|| ''}} {{order.ship_city|| ''}} {{order.ship_county|| ''}} {{order.ship_town|| ''}} {{order.ship_addr|| ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" @tap="getExpress(order.ship_no)" 
				v-if="order.order_status==='SHIPPED'||order.order_status==='CONFIRM'||order.order_status==='ROG'">
				<view class="flex align-center">
					<view class="cu-avatar radius orderIcon" style="background-image:url(../../static/images/icon_car.png);height: 28rpx;"></view>
					<view class="margin-left flex align-center justify-between" style="flex: 1;">
						<text>查看物流</text>
						<text class="cuIcon-right text-grey" style="font-size: 20px;"></text>
					</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view class="flex align-center">
					<image src="../../static/images/icon_shop_black.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" mode=""></image>
					<view class="text-333 text-df text-fw600">{{order.seller_name}}</view>
				</view>
				<view class="flex margin-top-sm" v-for="(item,index) in goodsList" :key="index">
					<view class="cu-avatar radius goodsImg" :style="'background-image:url('+item.goods_image+');'"></view>
					<view class="content margin-left-sm" style="flex: 1;">
						<view class="text-sm text-fw500" style="line-height:34upx;">
							{{item.name}}
						</view>
						<view class="text-grey text-sm flexLine" style="">
							<text>数量：x{{item.num}}</text>
							<text>￥{{item.real_price | formatPrice}}</text>
						</view>
						<view class="text-grey text-sm" style="width: 100%; margin-top: 10rpx;">
							<text>规格：{{item | formatterSkuSpec}}</text>
						</view>
						<view class="flexLine">
							<text class="text-xs text-order-orange">发货时间：下单24小时内发货</text>
						</view>
					</view>
				</view>
				<view class="flexLine ">
					<view class="text-333 text-xs">商品总价</view>
					<view class="text-xs">￥{{order.goods_price | formatPrice}} </view>
				</view>
				<view class="flexLine text-xs">
					<text class="text-333">运费</text>
					<text>￥{{order.shipping_price| formatPrice}}</text>
				</view>
				<view class="flexLine text-sm">
					<text class="text-333">实付款（含运费）</text>
					<text class="text-order-orange">￥{{order.need_pay_money| formatPrice}} </text>
				</view>
			</view>
			
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding-sm" @tap="contactSeller">
				<view class="flexLine" style="justify-content: center;">
					<image src="../../static/images/icon_shop_red.png" style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" mode=""></image>
					<view class="text-333 text-df">联系商家</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view>
					<view class="text-333 text-sm">
						<text>订单编号：</text><text class="margin-left-xs">{{order.sn}}</text>
					</view>
					<view class="text-333 text-sm margin-top-xs">
						<text>创建时间：</text><text class="margin-left-xs">{{order.create_time | unixToDate}}</text>
					</view>
				</view>
			</view>
			<view class="bg-lightGrey" style="height: 120rpx;"></view>
		</scroll-view>
		<view class="cu-bar bg-white tabbar foot border" v-if="order.order_status==='CONFIRM'||order.order_status==='SHIPPED'||order.order_status==='COMPLETE'||order.order_status==='ROG'|| seller.order_status=='PAID_OFF'">
			<view class="flex justify-end align-center" style="width: 100%;">
				<button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='CONFIRM'" @tap="showModal(order.sn)">取消订单</button>
				<!-- <button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='CONFIRM'" @tap="editAddr(order.sn)">修改地址</button> -->
				<button class="cu-btn line-pay text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='CONFIRM'" @tap="pay(order.sn)">去付款</button>
				<button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="seller.order_status==='COMPLETE' || order.order_status=='PAID_OFF'" @tap="applyAfterSafe(order,order.sn)">取消订单</button>
				<button class="cu-btn line-pay text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='SHIPPED'" @tap="getExpress(order.ship_no)">查看物流</button>
				<button class="cu-btn line-pay text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='SHIPPED'" @tap="confirmRog()">确认收货</button>
				<!-- <button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='ROG'" @tap="askInvoice(order.sn)">开具发票</button> -->
				<!-- <button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='ROG'" @tap="applyAfterSafe(order.sn)">申请售后</button> -->
				<!-- <button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='ROG'" @tap="checkAfterSafe(order.sn)">查看售后</button> -->
				<button class="cu-btn line-black text-333 text-sm margin-right-sm" style="width:160rpx;border-radius: 20rpx;" v-if="order.order_status==='ROG'" @tap="comment(order.sn,order.sku_list)">评价</button>
			</view>
		</view>
		<view class="cu-modal bottom-modal " :class="cancelshowModal?'show':''" style="z-index: 99999;">
			<view class="cu-dialog radius">
				<view class="cu-bar bg-white">
					<view class="action"></view>
					<view class="content text-df text-fw600">请选择取消原因</view>
					<view class="action text-333 cuIcon-close text-lg" style="font-size: 30rpx;" @tap="hideModal"></view>
				</view>
				<scroll-view scroll-y class="padding bg-white" style="text-align: left;height: 50vh; padding-bottom: 100rpx;">
					<view class="padding-top-sm" style="border-top: 1px solid #F5F5F5;border-bottom: 1px solid #F5F5F5;">
						<view class="text-fw600 text-333 text-lg">温馨提示</view>
						<view class="flex-direction text-333 text-lg padding-bottom-sm text-fw500">
							<view>1.限时特价，预约资格等购买优惠可能一并取消</view>
							<view>2.如遇到订单拆分，优惠券将换成同等价值京东返还</view>
							<view>3.支付券不予返还，支付优惠一并取消</view>
							<view>4.订单一旦取消，无法恢复</view>
						</view>
					</view>
					<view class="padding-top-xl" style="border-bottom: 1px solid #F5F5F5;">
						<view class="flex-direction text-333 margin-bottom-sm text-sm text-fw500">
							<view>请选择取消订单的原因(必选：)</view>
						</view>
					</view>
					<radio-group class="block margin-top" @change="RadioChange">
						<view class="cu-list sm-border ">
							<view class="cu-item" v-for="(item,index) in cancelReasonList" :key="index" @tap="handleCancel" :data-target="item.name">
								<view class="flex align-center flex-sub">
									<radio class="round" :class="checkActive===index?'checked':''" :checked="checkActive===index?true:false" style="height: 66rpx;"
									 :value="checkActive"></radio>
									<view class="flex-sub text-sm text-999 margin-left-sm" style="height: 50rpx;">{{item.name}}</view>
								</view>
							</view>
						</view>
					</radio-group>
				</scroll-view>
				<view class="flex">
					<view class="padding-sm bg-theme lg" style="position:fixed;bottom:0;width: 100%;" @tap="cancelOrder()">
						<text class="text-xl">提交</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Order_API from '../../api/order.js' 
	import * as Pay_API from '@/api/pay.js'
	import * as Foundation from '@/utils/Foundation.js'
	let client_type = 'MINI'
	export default {
		data() {
			return {
				sn:'',
				order:{},
				izNeddPay:false,
				izcancelOrder:false, //是否可取消订单
				izconfirmRog:false,//是否已经收货
				izdelOrder:false,//是否可删除订单
				cancelshowModal:false,
				cancelReason:'',
				izCheckExpress:false,
				active:0,
				izmember:uni.getStorageSync('role').id?true:false,
				goodsList:[],
				cancelReasonList:[
					{name:'订单不能按时送达'},
					{name:'操作有误(商品、地址选错)'},
					{name:'重复下单/误下单'},
					{name:'其他渠道价格更低'},
					{name:'该商品降价了'},
					{name:'不想买了'},
					{name:'商品无货'},
					{name:'其他原因'}
					// {name:'缺货少件'},
					// {name:'不想要了'},
					// {name:'商品降价'},
					// {name:'发错货'},
					// {name:'质量问题哦'},
					// {name:'商品与页面描述不符'},
					// {name:'商品损坏'},
					// {name:'商品质量问题'},
					// {name:'物流问题'},
					// {name:'商品严重损坏'},
					// {name:'协商退货'},
				],
				selextedSN:'',
				checkActive:0
			};
		},
		onLoad(e) {
			// console.log('1213',e)
			this.sn = e.sn
			this.getOrderDetail(e.sn)
			if(e.active){
				// console.log('e.active',e.active)
				this.active = parseInt(e.active) 
			}
		},
		
		onBackPress() {
			this.clearOrder();
		},
		filters: {
			toFixed:(x)=> {
				return parseFloat(x).toFixed(2);
			}
		},
		methods: {
			// 联系商家
			contactSeller(){
				uni.navigateTo({
					url:'/pages/profile/aftersafe/chat'
				})
			},
			getOrderDetail(sn){
				Order_API.getOrderDetail(sn).then(res =>{
					this.order = res
					if(res.order_sku_list) this.goodsList = res.order_sku_list
					// this.checkOrderType()
				})
			},
			getExpress(ship_no){
				console.log('getExpress===',this.order.ship_no ,ship_no)
				uni.navigateTo({
					url:'./logistics?ship_no='+ship_no
				})
			},
			checkOrderType(order){
				switch(order.order_status){
					case 'CONFIRM':
					return "等待买家付款"
					case 'PAID_OFF':
					return "等待卖家发货"
					case 'SHIPPED':
					return "卖家已发货"
					case 'ROG':
					return "去完成"
					case 'COMPLETE':
					return '交易成功'
					case 'CANCELLED':
					return "订单已取消"
					case 'AFTER_SERVICE':
					return "售后处理中"
				}
			},
			copyBtn(e) {
			    uni.setClipboardData({
			      data: e,
			      success:(res)=>{
			        uni.showToast({
			          title: '复制成功',
			        });
			      }
			    })
			},
			pay(sn){
				let params = {
					payment_plugin_id:'weixinPayPlugin',
					pay_mode:'normal',
					client_type:client_type
				}
				let trade_type = 'order'
				Pay_API.Pay(trade_type,sn,params).then(res =>{
					let nonceStr=res.res.nonceStr
					let	timeStamp=res.res.timeStamp
					let	_package=res.res.package
					let	paySign=res.res.paySign
					let signType=res.res.signType
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: timeStamp,
						nonceStr:nonceStr,
						package: _package,
						signType: signType,
						paySign: paySign,
						success: res=> {
							console.log('支付返回',res)
							uni.showToast({
								title: "支付成功",
								duration: 2000,
								icon: 'none'
							});
							this.clearPaymentOrder()
							uni.navigateBack({
								delta: -1
							})
						},
						fail: err=> {
							console.log('支付报错',err)
							if(err.errMsg === 'requestPayment:fail cancel'){
								uni.showToast({
									title: "已取消支付",
									icon: 'none'
								});
							}else{
								uni.showModal({
									content: "支付失败,原因为:\n " + err.errMsg,
									showCancel: false,
								})
							}
						}
					})
				})
			},
			// // 取消订单
			// cancelOrder(sn){
			// 	if(this.cancelReason){
			// 		Order_API.cancelOrder(sn,this.cancelReason).then(res =>{
			// 			this.hideModal()
			// 			uni.showToast({
			// 				title:'取消成功',
			// 				icon:'success',
			// 				success:()=> {
			// 					const pages = getCurrentPages()
			// 					const prevPage = pages[pages.length-2] // 上一页
			// 					prevPage.active = this.active    
			// 					uni.navigateBack({
			// 						delta: 1
			// 					})
			// 				}
			// 			})
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			title:'请填写取消原因',
			// 			icon:'none'
			// 		})
			// 	}	
			// },
			showModal(sn){
				console.log('123423',sn)
				this.selextedSN = sn
				this.cancelshowModal = true
			},
			hideModal(){
				this.cancelshowModal = false
			},
			handleCancel(e){
				this.cancelReason =  e.currentTarget.dataset.target
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			// 取消订单
			cancelOrder(sn){
				if(!this.cancelReason){
					this.cancelReason = this.cancelReasonList[0].name
				}
				// console.log('123',this.selextedSN)
				if(this.selextedSN!==''){
					Order_API.cancelOrder(this.selextedSN,this.cancelReason).then(res =>{
						// this.CheckType(this.active)
						uni.showToast({
							title:'取消成功',
							icon:'success',
							success:()=> {
								const pages = getCurrentPages()
								const prevPage = pages[pages.length-2] // 上一页
								prevPage.active = this.active    
								uni.navigateBack({
									delta: -1
								})
							}
						})			
						this.hideModal()
					})
				}
			},
			confirmRog(){
				uni.showModal({
					title: '收货提示',
					content: '你确定已收到购买的商品?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.confrimRog(this.sn).then(res=>{
								uni.showToast({
									icon:'success',
									title:'收货成功',
									success:()=> {
										const pages = getCurrentPages()
										const prevPage = pages[pages.length-2] // 上一页
										prevPage.active = this.active    
										uni.navigateBack({
											delta: 1
										})
									}
								})
							})
						}
					}
				});
			},
			delOrder(){
				uni.showModal({
					title: '删除提示',
					content: '你确定要删除该订单吗?',
					success: (res)=>{
						if (res.confirm) {
							Order_API.deleteOrder(this.sn).then(res =>{
								uni.showToast({
									icon:'success',
									title:'删除成功',
									success:()=> {
										const pages = getCurrentPages()
										const prevPage = pages[pages.length-2] // 上一页
										prevPage.active = this.active    
										uni.navigateBack({
											delta: 1
										})
									}
								})
							})
						}
					}
				});
			},
			comment(sn,sku_list){
				let sku_id = ''
				if(sku_list){
					sku_list.map(item =>{
						sku_id = item.sku_id
					})
				}
				uni.setStorage({
					key:'orderCommentSuk',
					data:sku_list,
					success() {
						uni.navigateTo({
							url:'./orderComment?sn='+sn
						})
					}
				})
				
			},
			applyAfterSafe(order,sn){
				if(order.sku_list){
					uni.setStorageSync('goods_applyAfter',order.sku_list)
					setTimeout(()=>{
						uni.navigateTo({
							url:'./afterSafeService?sn='+sn
						})
					},500)
				}
			},
			askInvoice(sn){
				uni.navigateTo({
					url:'./invoice?sn='+sn
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.orderIcon{
	width: 40rpx;
	background-color: #fff;
	background-size: cover;
}
.radius20{
	border-radius: 10rpx;
}
.overHidden{
	overflow: hidden;
}
.flexLine{
	width: 100%;
	display: flex;
	justify-content: space-between; 
	margin-top: 10rpx;
}
/deep/.cu-bar.tabbar {
	height:80rpx;
	padding-bottom: 0;
}
/deep/.cu-bar {
	min-height: 80rpx;
}
.text-order-orange{
	color: #F2854C;
}
/deep/.cu-btn {
	height: 50rpx;
	border-radius: 24rpx;
}
/deep/.cu-btn[class*="line"]::after{
	border: 1px solid #333;
	border-radius: 30rpx;
}
.goodsImg{
	width: 180upx;
	height: 180upx;
}
/deep/radio::before,checkbox::before {
margin-top: -14px;
}
</style>
